<template>
    <div>
        <ol>
            <li v-for="item in news" :key="item.id">
                <!-- 第一种写法：注意此处用绝对路径，to 要改成 v-bind 指令才能拼接 id -->
                <router-link :to="'/news-detail/' + item.id">
                    {{ item.title }}
                </router-link>
            </li>
        </ol>
    </div>
</template>
<script>
export default {
    data() {
        return {
            news: [
                { id: 1, title: '欧洲杯-莱万替补无功中超旧将点射 奥地利 3-1 波兰' },
                { id: 2, title: '欧洲杯-乌克兰 2-1 逆转斯洛伐克 津琴科助攻铁腰传射' },
                { id: 3, title: '抽象的强强碰撞，格列兹曼终结堪比卢卡库！德尚没姆巴佩真' },
                { id: 4, title: '1-3！欧洲杯首支出线队浮现！莱万难阻两连败，被中超旧将' },
            ]
        }
    }
}
</script>
<style></style>